<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
	<title>个人配置信息</title>
</head>
<body>
	<script type="text/html" id="tool">
		{{# if(d.userId !=-1){ }}
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		{{# } }}
	</script>
	<fieldset class="layui-elem-field">
		<legend>个人信息</legend>
		<div class="layui-field-box">
			<p>ID：<label id='userId' th:text="${user.id }" ></label></p>
			<p>姓名：<label id='userName' th:text="${user.userName }" ></label><button id="editName" type="button" class="layui-btn-xs layui-btn"> <i class="layui-icon">&#xe642;</i> </button></p>
			<p>工号：	<label id='workNum' th:text="${user.userAccount}" /></label></p>
			<p>sessionID：	<label id=userSessionId th:text="${user.userSessionId}" /></label><button id="editSession" type="button" class="layui-btn-xs layui-btn"> <i class="layui-icon">&#xe642;</i> </button></p>
			<p>邮箱：	<label id='email' th:text="${user.email}" /></label><button id="editMail" type="button" class="layui-btn-xs layui-btn"> <i class="layui-icon">&#xe642;</i> </button></p>
			<p>区域：	<label id='onwershipPlace' th:text="${user.onwershipPlace}" /></label></p>
			<p>办公地：	<label id='office' th:text="${user.office}" /></label><button id="editLoc" type="button" class="layui-btn-xs layui-btn"> <i class="layui-icon">&#xe642;</i> </button></p>
			<p>纬度：	<label id='latitude' th:text="${user.latitude}" /></label></p>
			<p>经度：	<label id='longitude' th:text="${user.longitude}" /></label></p>
			<p>有效范围：	<label id='shipPlaceInd' th:text="${user.shipPlaceInd} + '米'" /></label></p>
			<p>延迟时间：	早晨<font style="font-style: italic; color: red;font-weight: bold;">8:30</font>后，晚上<font style="font-style: italic; color: red;font-weight: bold;">21:30</font>后<label id='randomDelay' style="font-style: italic; color: red;font-weight: bold;" th:text="${user.randomDelay} + '分钟'" ></label>内随机<button id="editDelay" type="button" class="layui-btn-xs layui-btn"> <i class="layui-icon">&#xe642;</i> </button></p>
			<p>是否生效：	<label id='isInUse' style="font-style: italic; color: red;font-weight: bold;" th:text="${user.isInUse == 1} ? '是' : '否'" ></label></p>
		</div>
	</fieldset>
	
	<fieldset class="layui-elem-field">
		<legend>常用链接</legend>
		<div class="layui-field-box">
			<fieldset>
				<legend>浏览器操作(seesion有效时使用)</legend>
				<p>当月打卡记录：<a th:href="@{/record/} + ${user.userAccount}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/record/' + ${user.userAccount}"></a></p>
				<p>手动打卡：<a th:href="@{/punshNow/} + ${user.userAccount}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/punshNow/' + ${user.userAccount}"></a></p>
			</fieldset>
			<fieldset>
				<legend>微信操作(session失效时使用)</legend>
				<p>查询自己的打卡地点：<a th:href="@{/queryPunshAreaList/}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/queryPunshAreaList'"></a></p>
				<p>紧急打卡-北京(国家局)：<a th:href="@{/punshByHand}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/punshByHand'"></a></p>
				<p>紧急打卡-北京(裕友)：<a th:href="@{/punshByHandYuYou}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/punshByHandYuYou'"></a></p>
				<p>紧急打卡-西安：<a th:href="@{/punshByHandXian}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/punshByHandXian'"></a></p>
				<p>紧急打卡-配置地址：<a th:href="@{/punshByHandGIS/}+ ${user.userAccount}" target="_blank" th:text="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath()} + '/punshByHandGIS/'+ ${user.userAccount}"></a></p>
			</fieldset>
		</div>
	</fieldset>
	
	<fieldset class="layui-elem-field">
		<legend>打卡特殊配置信息</legend>
		<div class="layui-card layui-field-box">
			<div class="layui-card-header">
				<button id="newConf" type="button" class="layui-btn layui-btn-warm"> <i class="layui-icon layui-icon-add-1"></i> 新增时间</button>
			</div>
			<div class="layui-card-body">
				<table id="confTable" class="layui-table" lay-filter="confTable"></table>
			</div>
		</div>
	</fieldset>
	
</body>
	<div style="display:none">
		<div id="setName">
			<div class="layui-card">
				<div class="layui-card-body">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-block">
			    	  <input type="text" name="userName" id="userName_input" autocomplete="off" placeholder="请输入姓名" class="layui-input">
			    	</div>
				</div>
			</div>
		</div>
		
		<div id="setSession">
			<div class="layui-card">
				<div class="layui-card-body">
					<label class="layui-form-label">sessionID：</label>
					<div class="layui-input-block">
			    	  <input type="text" name="sessionID" id="sessionID_input" autocomplete="off" placeholder="请输入新的sessionID" class="layui-input">
			    	</div>
				</div>
			</div>
		</div>
		
		<div id="setMail">
			<div class="layui-card">
				<div class="layui-card-body">
					<label class="layui-form-label">邮箱：</label>
					<div class="layui-input-block">
			    	  <input type="text" name="mail" id="mail_input" autocomplete="off" placeholder="请输入新的邮箱" class="layui-input">
			    	</div>
				</div>
			</div>
		</div>
		
		<div id="setDelay">
			<div class="layui-card">
				<div class="layui-card-body">
					<label class="layui-form-label">延迟(分钟)：</label>
					<div class="layui-input-block">
			    	  <input type="text" name="delay" id="delay_input" autocomplete="off" placeholder="请输入新的延迟时间" class="layui-input">
			    	</div>
				</div>
			</div>
		</div>
	
		<div id="addConf">
			<div class=" layui-form" style="padding-top: 10px" lay-filter="form">
				<div class=" layui-form-item">
					<label class="layui-form-label">配置日期：</label>
					<div class="layui-input-inline">
			      		<input type="text" class="layui-input" id="datePick"></input>
				    </div>
				  </div>
				  <div class=" layui-form-item">
			    	<label class="layui-form-label">是否打卡：</label>
					<div class="layui-input-inline">
				      <select id="isPunsh" name="isPunsh" lay-verify="">
						  <option value="0">否</option>
						  <option value="1">是</option>
						</select>     
				    </div>
				</div>
			</div>
		</div>
		
		<div id="changeLoc">
			<div class="layui-card layui-field-box">
				<div class="layui-card-body">
					<div class=" layui-form" style="padding-top: 10px;" lay-filter="locForm">
						<div class="layui-inline">
							<input class="layui-input" id="onwershipPlaceSearch" placeholder="区域" autocomplete="off" >
						</div>
						<div class="layui-inline">
							<input class="layui-input" id="officeSearch" placeholder="办公地点" autocomplete="off" >
						</div>
						<div class="layui-inline">
							<input class="layui-input " id="latSearch" placeholder="纬度" autocomplete="off">
						</div>
						<div class="layui-inline">
							<input class="layui-input" id="lonSearch" placeholder="经度" autocomplete="off">
						</div>
						<button class="layui-btn" data-type="reload" id="searchBtn" >搜索</button>
					</div>
					<table id="areaTable" class="layui-table" lay-filter="areaTbl"></table>
				</div>
			</div>
		</div>
	</div>
<script type="text/javascript" th:src="@{/jquery-3.3.1.min.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
<script th:inline="javascript">
//一般直接写在一个js文件中
layui.use(['layer', 'table','form','laydate','util'], function(){
  var layer = layui.layer,
	  table = layui.table,
	  form = layui.form,
	  laydate = layui.laydate,
	  util = layui.util;
  
  var conf = [[${conf}]];
  var data = eval("(" + conf + ")");
  if(data && data.length > 0){
	  for(var i = 0; i < data.length; i++){
		  if(!data[i]){
			  continue;
		  }
		  if(!data[i].userId){
			  data[i].range = "-";
    	  }
    	  if(data[i].userId == -1){
    		  data[i].range = "全体";
    	  }else{
    		  data[i].range = "本人";
    	  }
    	  
    	  if(!data[i].isPunsh){
			  if(data[i].isPunsh == 0){
	    		  data[i].isPunsh = "否";
	    	  } else {
	    		  data[i].isPunsh = "-";
	    	  }
    	  } else if(data[i].isPunsh == 1){
    		  data[i].isPunsh = "是";
    	  }
    	  
    	  if(data[i].extDay){
    		  data[i].extDay = util.toDateString(data[i].extDay, "yyyy-MM-dd");
    	  }
	  }
  }
  
	//渲染表格
	var tableIns = table.render({
      elem: "#confTable",
      cols:[
    	  [
          {field:'numbers',title:'序号',align:'center',type:'numbers'},
          {field:'id', hide:'id'},
          {field:'userId', hide:'true'},
          {field:'range',title:'配置范围',align:'center'},
          {field:'extDay',title:'配置日期',align:'center',sort:true},
          {field:'isPunsh',title:'是否打卡',align:'center', function(d){
        	  if(!d || !d.isPunsh){
        		  return "-";
        	  }
        	  if(d.isPunsh == 0){
        		  return "否";
        	  }else if(d.isPunsh == 1){
        		  return "是";
        	  }
          }},
          {field:'operation',title:'操作',width:120,align:'center',toolbar:'#tool'},
      ]
    ],
      text: {
          none: "无数据"
      },
      data : data,
      page : false,
      limit : data.length
  });
  
	//监听行工具事件
	table.on('tool(confTable)', function(obj){
		var data = obj.data;
		if(obj.event == 'del'){
			layer.confirm('该操作不可恢复，确认要删除？', {icon: 7, title : '温馨提示'}, function(index){
				var params = {"confID" : data.id};
				$.post('../delConf/' + data.id, {}, function(str){
					location.reload(true);
				});
				layer.close(index);
			});
		}
	});
	
	// 修改姓名
	$("#editName").on("click",function(){
		var html = $('#setName').html().replace("userName_input", "userName_t");
		layer.open({
			type: 1,
			btn: ['确认', '取消'],
			area: ['500px'],
			content: html, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			yes: function(index, layero){
				var userId = $('#userId').text();
				var userName = $('#userName_t').val();
				if(userId && userName){
					$.post('../changeName/' + userId + '/' + userName, {}, function(str){
						$('#userName').text(userName);
						layer.close(index); //如果设定了yes回调，需进行手工关闭
					});
				} else{
					layer.open({
						  content: 'sessionID不能为空',
						  yes: function(ii, layero){
						    //do something
						    layer.close(ii); //如果设定了yes回调，需进行手工关闭
						  }
						});
				}
			},
			no: function(index, layero){
				layer.close(index);
			},
			cancel: function(index, layero){
				layer.close(index);
				return false; 
			}    
		});
    });
	
	// 修改session
	$("#editSession").on("click",function(){
		var html = $('#setSession').html().replace("sessionID_input", "sessionID_t");
		layer.open({
			type: 1,
			btn: ['确认', '取消'],
			area: ['500px'],
			content: html, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			yes: function(index, layero){
				var sessionID = $('#sessionID_t').val();
				var userName = $('#userName').text();
				if(sessionID && userName){
					$.post('../setsession/' + userName + '/' + sessionID, {}, function(str){
						$('#userSessionId').text(sessionID);
						$('#isInUse').text("是");
						layer.close(index); //如果设定了yes回调，需进行手工关闭
					});
				} else{
					layer.open({
						  content: 'sessionID不能为空',
						  yes: function(ii, layero){
						    //do something
						    layer.close(ii); //如果设定了yes回调，需进行手工关闭
						  }
						});
				}
			},
			no: function(index, layero){
				layer.close(index);
			},
			cancel: function(index, layero){
				layer.close(index);
				return false; 
			}    
		});
    });
	
	// 修改邮箱
	$("#editMail").on("click",function(){
		var html = $('#setMail').html().replace("mail_input", "mail_t");
		layer.open({
			type: 1,
			btn: ['确认', '取消'],
			area: ['500px'],
			content: html, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			yes: function(index, layero){
				var mail = $('#mail_t').val();
				var userId = $('#userId').text();
				if(mail && userId){
					$.post('../changeMail/' + userId + '/' + mail, {}, function(str){
						$('#email').text(mail);
						layer.close(index); //如果设定了yes回调，需进行手工关闭
					});
				} else{
					layer.open({
						  content: '邮箱不能为空',
						  yes: function(ii, layero){
						    //do something
						    layer.close(ii); //如果设定了yes回调，需进行手工关闭
						  }
						});
				}
			},
			no: function(index, layero){
				layer.close(index);
			},
			cancel: function(index, layero){
				layer.close(index);
				return false; 
			}    
		});
    });
	
	// 修改延迟时间
	$("#editDelay").on("click",function(){
		var html = $('#setDelay').html().replace("delay_input", "delay_t");
		layer.open({
			type: 1,
			btn: ['确认', '取消'],
			area: ['500px'],
			content: html, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			yes: function(index, layero){
				var delay = $('#delay_t').val();
				var userId = $('#userId').text();
				if(delay && userId){
					if(!/^[0-9]+$/.test(delay) || delay == 0){
						layer.msg("延迟时间必须是正整数", {icon: 5, shift: 6});
						return false;
					}
					$.post('../changeTime/' + userId + '/' + delay, {}, function(str){
						$('#randomDelay').text(delay + "分钟");
						layer.close(index); //如果设定了yes回调，需进行手工关闭
					});
				} else{
					layer.open({
						  content: '延迟时间不能为空',
						  yes: function(ii, layero){
						    //do something
						    layer.close(ii); //如果设定了yes回调，需进行手工关闭
						  }
						});
				}
			},
			no: function(index, layero){
				layer.close(index);
			},
			cancel: function(index, layero){
				layer.close(index);
				return false; 
			}    
		});
    });
	
	function verify(val){
		if(!/^\d+(\.\d+)?$/.test(val)){
			return false;
		}
		return true;
	}
	
	// 修改办公地
	$("#editLoc").on("click",function(){
		var html = $('#changeLoc').html().replace("areaTable", "areaTable_t").replace("searchBtn", "searchBtn_t");
		html = html.replace("onwershipPlaceSearch", "onwershipPlace_t").replace("officeSearch", "office_t");
		html = html.replace("latSearch", "latSearch_t").replace("lonSearch", "lonSearch_t");
		layer.open({
			type: 1,
			resize : false,
			btn: ['取消'],
			area: ['800px', '500px'],
			content: html, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			yes: function(index, layero){
				layer.close(index);
			},
			success : function(layero, index){
				//渲染区域选择表格
				var tbl = table.render({
				      elem: "#areaTable_t",
				      cols:[
				    	  [
				          //{field:'numbers',title:'序号',align:'center',type:'numbers'},
				          {field:'id', hide:'id'},
				          {field:'onwership_place',title:'区域',align:'center', width:'60'},
				          {field:'office',title:'办公地点',align:'center', width:'360'},
				          {field:'latitude',title:'纬度',align:'center', width:'100'},
				          {field:'longitude',title:'经度',align:'center', width:'100'},
				          {field:'ship_place_ind',title:'有效范围',align:'center', width:'100'}
				      ]
				    ],
				      text: {
				          none: "无数据"
				      },
				      data : []
				  });
				table.on('rowDouble(areaTbl)', function(obj){
					var userId = $('#userId').text();
					$.post('../changeArea/' + userId + '/' + obj.data.id, {}, function(str){
						location.reload(true);
					});
				});
				//绑定区域查询按钮
				$("#searchBtn_t").on("click",function(){
					var lat = $("#latSearch_t").val();
					var lon = $("#lonSearch_t").val();
					if(!lat && !lon){
						tbl.reload({
							url : "../areaSearch",
							page: {
								curr: 1 //重新从第 1 页开始
							},
							where: {
								t : Math.random(),
								onwershipPlace : $("#onwershipPlace_t").val(),
								office : $("#office_t").val(),
								lat : 0,
								lon : 0
							}
						});
					}else if((!lat && lon) || (lat && !lon)){
						layer.msg("经纬度必须同时作为查询条件", {icon: 5, shift: 6});
					} else {
						if(!verify(lat) || !verify(lon)){
							layer.msg("经纬度格式错误", {icon: 5, shift: 6});
						} else {
							tbl.reload({
								url : "../areaSearch",
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									t : Math.random(),
									onwershipPlace : $("#onwershipPlace_t").val(),
									office : $("#office_t").val(),
									lat : $("#latSearch_t").val(),
									lon : $("#lonSearch_t").val()
								}
							});
						}
					}
				});
				
			},
			cancel: function(index, layero){
				layer.close(index);
				return false; 
			}    
		});
    });
	
	$("#newConf").on("click",function(){
		var html = $('#addConf').html().replace("datePick", "datePick_t").replace("isPunsh", "isPunsh_t");
		layer.open({
			type: 1,
			btn: ['确认', '取消'],
			area: ['500px', '300px'],
			content: html, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
			success: function(layero, index){
				form.render(null, "form");
				laydate.render({
					elem: '#datePick_t'//指定元素
				});
			},
			yes: function(index, layero){
				var userId = $('#userId').text();
				var datePick = $('#datePick_t').val();
				var isPunsh = $('#isPunsh_t').val();
				if(datePick){
					$.post('../addConf/' + userId + '/' + datePick + '/' + isPunsh, {}, function(str){
						location.reload(true);
					});
				} else{
					layer.open({
						  content: '请选择时间和打卡配置',
						  yes: function(ii, layero){
						    //do something
						    layer.close(ii); //如果设定了yes回调，需进行手工关闭
						  }
						});
				}
			},
			no: function(index, layero){
				layer.close(index);
			},
			cancel: function(index, layero){
				layer.close(index);
				return false; 
			}
		});
    });
});
</script> 
</html>